<script setup lang="ts">
import type { CodeMateProject, CodeMateProjectQuery } from '@/apis/code/codeMateApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { codeMateProjectApi } from '@/apis/code/codeMateApi'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import CodeGenerateDialog from './components/CodeGenerateDialog.vue'

const router = useRouter()

const {
  submitQuery,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<CodeMateProjectQuery, CodeMateProject>({
  autoQuery: true,
  queryPage: query => codeMateProjectApi.queryPage(query),
  queryFields: [
    { name: 'projectName', title: '项目名称' },
    { name: 'remark', title: '项目说明' },
    { name: 'basePackage', title: '项目包名' },
    { name: 'moduleName', title: '模块名称' },
    { name: 'moduleCode', title: '模块编码' },
  ],
  tableFields: [
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: true },
    { title: '项目名称', name: 'projectName', width: 180, columnType: 'MAIN', sort: true, click: data => router.push(`/code/mate/module/${data.projectName}`) },
    { title: '项目说明', name: 'remark', width: 180, sort: false },
    { title: '项目包名', name: 'basePackage', width: 180, sort: false },
    { title: '模块名称', name: 'moduleName', width: 180, sort: false },
    { title: '模块编码', name: 'moduleCode', width: 180, sort: false },
    { title: '更新时间', name: 'updateTime', width: 180, show: false },
  ],
})

const codeGenerateDialog = ref<InstanceType<typeof CodeGenerateDialog>>()
const actions = reactive<Record<string, DataAction>>({
  create: {
    label: '新增',
    type: 'primary',
    authCode: 'code:mate:project:create',
    click: () => router.push(`/code/mate/module`),

  },
  module: {
    label: '模块',
    type: 'success',
    authCode: 'code:mate:module:modify',
    click: data => router.push(`/code/mate/module/${data.projectName}`),
  },

  generate: {
    label: '生成代码',
    type: 'primary',
    authCode: 'code:mate:generate',
    click: data => codeGenerateDialog.value?.open(data.projectName),
  },

  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'code:mate:project:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => codeMateProjectApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
})
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <data-button :action="actions.create" />
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table :row-actions="[actions.generate, actions.module, actions.remove]" />
  </BaseCard>

  <CodeGenerateDialog ref="codeGenerateDialog" />
</template>
